<template>
  <div class="page pay">
    <div style="background:#fff;">
      <div class="payBg">
        <!-- <img src="" alt="" class="payBgImg" /> -->
        <div class="payBgTitle">文墨天机</div>
      </div>
      <div class="payBox">
        <div class="payBoxTit">支付金额</div>
        <div class="flex justify-sb align-center payNumBox">
          <div class="payIcon">¥</div>
          <div class="payNum flex">
            <div>{{ numInput }}</div>
            <div class="payInputLine"></div>
          </div>
        </div>
        <div class="flex justify-sb align-center payLink">
          <div @click="isRemarkShow=true">添加备注</div>
          <div @click="onGoPage('register-member')">注册会员</div>
        </div>
      </div>
      <div class="payTip">注册会员享充100送20优惠（点击办理）</div>
    </div>
    <div class="payTrademark">家有福利社提供技术支持</div>
    <div class="flex">
      <NumberKey :is-meber-pay="false" @getPay="onGetMoneyNum" @pay="onImmediateButton" />
    </div>
    <van-overlay :show="isMeberShow" class="flex justify-center align-center" @click="isMeberShow = false">
      <div class="merberBox flex flex-direction align-center" @click.stop>
        <img src="@/assets/payView/memberVipBg.png" class="merberImg" alt="" />
        <div class="merberTit">本单订单 <span class="merberTitPrice">{{ numInput }}</span>元,办理会员卡享</div>
        <div class="merberTit"><span class="merberTitPrice">充{{ rechargeObj.rechargeAmt/100 }}送{{ rechargeObj.giveAmt/100 }}</span>优惠, 去办理吧~</div>
        <div class="merberBut" @click="onImmediatePay()">有钱任性直接支付</div>
        <div class="merberButAct" @click="onGoPage('register-member')">我要成为会员</div>
      </div>
    </van-overlay>
    <van-popup
      v-model:show="isRemarkShow"
      round
      closeable
      position="bottom"
    >
      <div class="remarkBox">
        <div class="remarkTit">订单备注</div>
        <van-field
          v-model="remark.new"
          rows="3"
          autosize
          type="textarea"
          maxlength="30"
          placeholder="请输入备注内容"
          show-word-limit
          class="remarkText"
        />
        <div class="remarkBut" @click="onGetRemark()">确定</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import NumberKey from '@/components/NumberKey.vue'
import { commonAjax } from 'Ajax'
import { tuneUpZFB, tuneUpWX } from '@/utils/utils'
import { getCookie } from '@/utils/validate.js'
export default {
  components: {
    NumberKey
  },
  setup() {
  },
  data() {
    return {
      payEnv: this.$store.getters.env,
      numInput: '',
      payStatus: 0, // 0 未支付 1 正在支付中
      isRemarkShow: false,
      remark: {
        new: '',
        use: ''
      },
      isMeberShow: false,
      rechargeObj: {} // 充值活动
    }
  },
  methods: {
    onGetRemark() {
      this.remark.new ? this.remark.use = this.remark.new : this.$toast('请输入备注~')
      this.isRemarkShow = false
    },
    onGetMoneyNum(num) { this.numInput = num },
    // 点击立即支付按钮
    onImmediateButton(num) {
      // if (this.payEnv === 'OTHER') return this.$toast('暂不支持处微信,支付宝以外浏览器支付~')
      // if (!num) return this.$toast('请输入金额~')
      if (this.payStatus) return
      // commonAjax.getRechargeActivity({ orderAmt: num * 100 }).then(res => {
      //   this.rechargeObj = res
      //   this.isMeberShow = true
      //   this.payStatus = 0
      // }, error => {
      //   console.log(error)
      // })
      this.rechargeObj = {
        'cardConfigDetailId': 0,
        'giveAmt': 1000,
        'rechargeAmt': 10000,
        'recommend': true
      }
      this.isMeberShow = true
      this.payStatus = 0
    },
    // 支付
    onImmediatePay() {
      if (this.payStatus) return
      this.payStatus = 1
      this.getPayValAjax(this.numInput * 100, this.getEnum(this.payEnv))
    },
    // 获取枚举值
    getEnum(value, type) {
      const obj = {
        'WX': '010',
        'ZFB': '020'
      }
      const findKey = (val, compare = (a, b) => a === b) => {
        return Object.keys(obj).find(k => compare(obj[k], val))
      }
      return type === 'value' ? findKey(value) : obj[value]
    },
    // 根据 付款类型(微信,支付宝),金额  获取付款参数
    getPayValAjax(num, payType) {
      const params = {
        'amount': num,
        'remark': this.remark.use,
        'terminalNo': getCookie().terminalNo, // 12535186 微信  12467217  支付宝
        'payType': payType
      }
      commonAjax.pay(params).then(res => {
        if (payType === '010') { // 如果是微信
          tuneUpWX(res.payResponse)
        } else if (payType === '020') { // 如果是支付宝
          tuneUpZFB(res.payResponse.ali_trade_no)
        }
        this.payStatus = 0
      }, err => {
        this.payStatus = 0
        console.log(err)
      })
    },
    onGoPage(url) {
      url = '/' + url
      this.$jump(url)
    }
  }
}
</script>

<style scoped>
.pay{
  display: flex;
  flex-direction: column;
}
.payBg{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: url('../../assets/payView/bg.png') no-repeat;
  background-size: 100% 100%;
}
.payBgTitle{
  color: #000;
  font-size: 28px;
  margin-bottom: 42px;
}
.payBgImg{
  width: 183px;
  height: 186px;
  background: #C81B1F;
  box-shadow: 0px 6px 11px 1px #D4D0C7;
  border-radius: 30px;
}
.payBox{
  height: 262px;
  padding: 38px 50px 36px 48px;
  border-bottom: 1px solid #F7F7F7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.payBoxTit{
  font-size: 28px;
  color: #000;
}
.payNumBox{
  padding: 32px 0;
  border-bottom: 1px solid #F7F7F7;
}
.payIcon{
  font-size: 70px;
  font-weight: 700;
}
.payNum{
  text-align: right;
  height: 52px;
  font-size: 70px;
  font-family: DIN Alternate;
  font-weight: bold;
  color: #000000;
  line-height: 70px;
}
.payInputLine{
  width: 5px;
  height: 70px;
  background: #CA0114;
}
.payLink{
  font-size: 26px;
  color: #1D97FF;
}
.payTip{
  padding: 36px 48px;
  height: 25px;
  font-size: 26px;
}
.payTrademark{
  font-size: 24px;
  font-weight: 400;
  color: #ABABAB;
  padding-top: 30px;
  text-align: center;
  background: #F2F2F2;
  flex: 1;
}
.sendBut{
  width: 180px;
  height: 436px;
  background: #F8B202;
  font-size: 46px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.numberBox{
  width: 186px;
  height: 107px;
  line-height: 107px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
}
.numberBoxImg{
  width: 40px;
  height: 40px;
  display: block;
}

/* 会员view */
.merberBox{
  width: 580px;
  height: 660px;
  background: #FFFFFF;
  border-radius: 20px;
}
.merberImg{
  width: 190px;
  height: 190px;
  display: block;
}
.merberTit{
  font-size: 26px;
  color: #525252;
  text-align: center;
}
.merberTitPrice{
  font-size: 42px;
  color: #F14214;
}
.merberBut{
  width: 400px;
  height: 90px;
  line-height: 90px;
  border: 1px solid #F38D14;
  border-radius: 45px;
  text-align: center;
  font-size: 34px;
  color: #F38D14;
  margin: 84px 0 30px;

}
.merberButAct{
  width: 400px;
  height: 90px;
  background: linear-gradient(90deg, #EF8014 0%, #FFAE13 100%);
  box-shadow: 0px 6px 11px 1px rgba(255, 171, 123, 0.53);
  border-radius: 45px;
  line-height: 90px;
  border: 1px solid #F38D14;
  border-radius: 45px;
  text-align: center;
  font-size: 34px;
  color: #FFF;
}

/* 备注 */
.remarkBox{
  width: 100%;
  height: 556px;
}
.remarkTit{
  width: 100%;
  height: 126px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #000000;
  line-height: 126px;
}
.remarkBox >>> .remarkText{
  margin: 0 auto;
  width: 650px;
  background: #F7F7F7;
  border-radius: 4px;
  padding: 20px;
}
.remarkBox >>> .van-field__word-limit{
  font-size: 24px;
  font-weight: 600;
  color: #BBBBBB;
}
.remarkBut{
  width: 630px;
  height: 80px;
  background: linear-gradient(90deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 10px;
  margin: 66px auto 0;
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 80px;
  text-align: center;
}
</style>
